<template>
  <div class="page">
    <div class="personal-layout">
      <Layout :style="{height: '800px'}">
        <Header style="background-color: #00a0dc"><div style="color: white;">PILIPILI个人中心</div></Header>
        <Content :style="{minHeight: '280px', background: '#fff'}">
          <Layout :style="{padding: '0 50px',height: '800px'}">
            <Sider hide-trigger :style="{background: '#fff'}">
              <Menu  theme="light" width="auto"  style="height: 800px" accordion @on-select="handleSelect">
                  <MenuItem name="personalInfo">修改个人信息</MenuItem>
                  <MenuItem name="videoManage">投稿作品管理</MenuItem>
                  <MenuItem name="videoTransProgress">投稿任务进度</MenuItem>
                  <MenuItem name="collectionManage">收藏管理</MenuItem>
                  <MenuItem name="评论管理">评论管理</MenuItem>
              </Menu>
            </Sider>
            <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
              <router-view></router-view>
            </Content>
          </Layout>
        </Content>
      </Layout>
  </div>
  </div>
</template>

<script>
    export default {
        name: "PersonalCenterComponent",
        methods:{
          handleSelect(name){
            this.$router.push({path:'/personalCenter/' + name});
          }
        }
    }
</script>

<style scoped>
  .personal-layout{
    background: #f5f7f9;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    width: 1200px;
    height: 800px;
  }
  .page {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
